<template>
    <div class="paydiv1">
        <div class="paydiv2"></div>
        <div class="paydiv3">
            <span class="paydiv3span1" :style="PayBtnStyle"
            @mouseover="BtnMO" @mouseleave="BtnML"
            @click="PayBtn">立即支付</span>
            <span class="paydiv3span2" 
            v-show="!(WechatOrAli != ''&& checked ==0 || (BankCheckedLeft+BankCheckedRight != 198))">
            请选择支付方式</span>
        </div>
        <el-dialog
        title="支付提示"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose">
        <span>若您完成支付了请点击确定</span>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="paysuccess">确 定</el-button>
        </span>
        </el-dialog>
    </div>
</template>

<script>
import axios from 'axios'
    export default {
        name:'XiaoPayBtn',
        data(){
            return{
                checked:99,
                BankCheckedLeft:99,
                BankCheckedRight:99,
                PayBtnStyle:'',
                ChangePayBtnStyle:{
                    'before':'background-color: rgb(206, 206, 206);color: rgb(136, 136, 136);cursor: not-allowed;',
                    'after':'color: white;background-color: rgb(228, 67, 102);cursor: pointer;',
                    'hover':'color: white;background-color: rgb(255, 94, 121);cursor: pointer;'
                },
                WechatOrAli:'',
                dialogVisible:false,

            }
        },
        methods:{
            PayBtn(){
                if(this.WechatOrAli =='wechat'){
                    console.log('wechat!!!');
                }else if(this.WechatOrAli =='ali'){
                    this.$addr.get(`alipay/10/pay_page`).then(
                        response=>{
                            console.log('请求支付成功了',response)
                            if(response.data.state == 4005){
                                this.$message({
                                message: response.data.message,
                                type: 'error'
                                });
                            }else if(response.data.state == 4009){
                                this.$message({
                                message: response.data.message,
                                type: 'error'
                                });
                            }else{
                                console.log('ali!!!');
                                this.dialogVisible=true
                                window.open('https://www.haiggood.com/alipay/10/pay_page')
                            }
                        },
                        error=>{
                            console.log('请求支付失败了',error.message)
                        }
                    )
                }
            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                .then(_ => {
                    done();
                })
                .catch(_ => {});
            },
            paysuccess(){
                this.dialogVisible = false
                console.log('paysuccess');
                    this.$addr.get(`alipay/10/query`).then(
                        response=>{
                            console.log('查看是否支付的请求成功了',response)
                            // if(response.data == 'TRADE_SUCCESS'){
                            //     this.$message({
                            //     message: '支付成功!',
                            //     type: 'success'
                            //     });

                            // }else{
                            //     this.$message({
                            //     message: '您还未支付!',
                            //     type: 'error'
                            //     });
                            // }
                        },
                        error=>{
                            console.log('查看是否支付的请求失败了',error.message)
                        }
                    )
            },
            BtnMO(){
                if( this.WechatOrAli != ''&& this.checked ==0 || this.BankCheckedLeft != 99 || this.BankCheckedRight != 99){
                    this.PayBtnStyle=this.ChangePayBtnStyle.hover
                }
            },
            BtnML(){
                if( this.WechatOrAli != ''&& this.checked ==0 || this.BankCheckedLeft != 99 || this.BankCheckedRight != 99){
                    this.PayBtnStyle=this.ChangePayBtnStyle.after
                }
            },
        },
        mounted(){
            // console.log(this.BankCheckedLeft+this.BankCheckedRight,'$%^^^');

            this.$bus.$on('TwoWayChecked',(TwoWayChecked)=>{
                this.checked=TwoWayChecked
               if( this.WechatOrAli != '' && this.checked ==0){
                    this.PayBtnStyle=this.ChangePayBtnStyle.after
                }else if(this.WechatOrAli == '' && this.checked ==1){
                    if(this.BankCheckedLeft+this.BankCheckedRight == 198){
                        this.PayBtnStyle=this.ChangePayBtnStyle.before
                    }
                }
            })
            this.$bus.$on('BankChecked',(leftindex,rightinden)=>{
                this.BankCheckedLeft=leftindex
                this.BankCheckedRight=rightinden
                if( leftindex + rightinden != 198){
                    this.PayBtnStyle=this.ChangePayBtnStyle.after
                }else{
                    this.PayBtnStyle=this.ChangePayBtnStyle.before
                }
            })
            this.$bus.$on('WechatOrAli',(WechatOrAli)=>{
                this.WechatOrAli=WechatOrAli
               if( this.WechatOrAli != '' && this.checked ==0){
                    this.PayBtnStyle=this.ChangePayBtnStyle.after
                }else if(this.WechatOrAli == '' && this.checked ==1){
                    if(this.BankCheckedLeft+this.BankCheckedRight == 198){
                        this.PayBtnStyle=this.ChangePayBtnStyle.before
                    }
                }
            })
        },
        beforeDestroy(){
            this.$bus.$off('TwoWayChecked')
            this.$bus.$off('BankChecked')
            this.$bus.$off('WechatOrAli')
        }
    }
</script>

<style scoped>
.paydiv1{
    margin: 0 auto;
    width: 1000px;
    height: 200px;
}
.paydiv2{
    margin-top: 30px;
    height: 3px;
    background-color: rgb(184, 184, 184);
    border: 1px;
}
.paydiv3{
    margin-top: 20px;
}
.paydiv3span1{
    position: absolute;
    margin-top: 10px;
    padding: 13px;
    padding-left: 40px;
    padding-right: 40px;
    border-radius: 4px;
    font-size: 18px;
    /* 以下样式发生改变 */
    background-color: rgb(206, 206, 206);
    color: rgb(136, 136, 136);
    cursor: not-allowed;
}
.paydiv3span2{
    margin-left: 170px;
    margin-top: 28px;
    position: absolute;
    color: red;
    font-size: 12px;
}
</style>